<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>订单跟踪</title>
		<link type="text/css" rel="stylesheet" href="../../../css/index.css" />
		<link type="text/css" rel="stylesheet" href="../../../layui/css/layui.css" />
		<link type="text/css" rel="stylesheet" href="../../../css/manage/order.css" />
		<style>
			.layui-timeline{width:600px;margin:auto;padding:30px 0;}
			.layui-timeline-axis{left:1px !important;background-color:#CACACA !important;width:10px !important;height:10px !important;line-height: 10px !important;}
			.layui-timeline-item{margin-top:24px;}
			.layui-timeline-axis.active{background-color: #EF593C !important;}
			.nowtime .layui-timeline-axis{width:14px !important;height:14px !important;background-color: #fff !important;border:3px solid #ef593c;left:-1px !important;}
			.nowtime.layui-timeline-item:before, hr{background-color:#ef593c;}
			.layui-timeline-item:before{width:2px !important;top:18px !important;}
			.nowtime .layui-timeline-title{font-size:14px;font-weight: normal;}
			.nowtime p{color:#666;}
			.layui-timeline .layui-timeline-content,.layui-timeline .layui-timeline-title{color:#999;font-size:14px;font-weight: normal;}
		</style>
	</head>
	<body>
		<header></header>
		<div id="menu"></div>
		<div class="content">
			<div class="content-title">订单跟踪</div>
			<div class="content-table">
				<ul class="layui-timeline">
				<li class="layui-timeline-item nowtime">
					<i class="layui-icon layui-timeline-axis "></i>
					<div class="layui-timeline-content layui-text">
						<h3 class="layui-timeline-title">订单已签收，期待再次为您服务</h3>
						<p>
							2018-10-27    12:46:21
						</p>
					</div>
				</li>
				<li class="layui-timeline-item">
					<i class="layui-icon layui-timeline-axis active"></i>
					<div class="layui-timeline-content layui-text">
						<h3 class="layui-timeline-title">到达目的地网店广东深圳公司，快件将很快进行派送</h3>
						<p>2018-10-27    12:46:21</p>
					</div>
				</li>
				<li class="layui-timeline-item">
					<i class="layui-icon layui-timeline-axis"></i>
					<div class="layui-timeline-content layui-text">
						<h3 class="layui-timeline-title">到达目的地网店广东深圳公司</h3>
						<p>2018-10-27    12:46:21</p>
					</div>
				</li>
				<li class="layui-timeline-item">
					<i class="layui-icon layui-timeline-axis"></i>
					<div class="layui-timeline-content layui-text">
						<h3 class="layui-timeline-title">订单付款成功</h3>
						<p>2018-10-27    12:46:21</p>
					</div>
				</li>
			</ul> 
			</div>
		</div>
	</body>
<script type="text/html" id="barDemo">
						<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看详情</a>
            {{# if(d.edit=="0"){ }}
						<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除订单</a>
						
            {{# } else if(d.edit=="1"){}}
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="jiechu">关闭订单</a>
            {{# } }}
	</script>
	<script src="../../../js/plugIn/jquery-3.3.1.min.js"></script>
	<script src="../../../layui/layui.all.js"></script>
	<script src="../../../js/plugIn/metisMenu.js"></script>
	<script>
		var menuList = "dingdanguanli";
		var menuSec = "dingdanliebiao";
		$('header').load('../home.html');
		$('#menu').load('../menu.html');
		$(function(){
				var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
				var table = layui.table;
				var laydate = layui.laydate;
				var layer = layui.layer;
				var laypage  = layui.laypage ;
				
				//监听导航点击
				element.on('nav(demo)', function(elem){
					layer.msg(elem.text());
				});
				//自定义格式
				laydate.render({
					elem: '#orderDate'
					,format: 'yyyy年MM月dd日'
				});
				//展示已知数据
			table.render({
				elem: '#orderList'
				,cols: [[ ,//标题栏
						{type: 'checkbox'}
					,{field: 'id', title: '订单编号'}
					,{field: 'username', title: '提交时间' }
					,{field: 'email', title: '用户账号'}
					,{field: 'sign', title: '订单金额'}
					,{field: 'sex', title: '支付方式' }
					,{field: 'orderStatus', title: '订单状态'}
					,{toolbar:'#barDemo',title: '操作',width:160}
				]]
				,data: [{
					"id": "10001"
					,"username": "杜甫"
					,"email": "xianxin@layui.com"
					,"sex": "男"
					,"city": "浙江杭州"
					,"sign": "人生恰似一场修行"
					,"experience": "116"
					,"ip": "192.168.0.8"
					,"logins": "108"
					,"orderStatus": "待付款"
					,"edit":"0"
				}, {
					"id": "10002"
					,"username": "李白"
					,"email": "xianxin@layui.com"
					,"sex": "男"
					,"city": "浙江杭州"
					,"sign": "人生恰似一场修行"
					,"experience": "12"
					,"ip": "192.168.0.8"
					,"logins": "106"
					,"joinTime": "2016-10-14"
					,"orderStatus": "待发货"
					,"edit":"2"
				}, {
					"id": "10003"
					,"username": "王勃"
					,"email": "xianxin@layui.com"
					,"sex": "男"
					,"city": "浙江杭州"
					,"sign": "人生恰似一场修行"
					,"experience": "65"
					,"ip": "192.168.0.8"
					,"logins": "106"
					,"orderStatus": "已完成"
					,"edit":"1"
				}, {
					"id": "10004"
					,"username": "贤心"
					,"email": "xianxin@layui.com"
					,"sex": "男"
					,"city": "浙江杭州"
					,"sign": "人生恰似一场修行"
					,"experience": "666"
					,"ip": "192.168.0.8"
					,"logins": "106"
					,"orderStatus": "已关闭"
					,"edit":"0"
				}, {
					"id": "10005"
					,"username": "贤心"
					,"email": "xianxin@layui.com"
					,"sex": "男"
					,"city": "浙江杭州"
					,"sign": "人生恰似一场修行"
					,"experience": "86"
					,"ip": "192.168.0.8"
					,"logins": "106"
					,"orderStatus": "待付款"
					,"edit":"0"
				}, {
					"id": "10006"
					,"username": "贤心"
					,"email": "xianxin@layui.com"
					,"sex": "男"
					,"city": "浙江杭州"
					,"sign": "人生恰似一场修行"
					,"experience": "12"
					,"ip": "192.168.0.8"
					,"logins": "106"
					,"orderStatus": "待付款"
					,"edit":"1"
				}]
				,even: true
				,page: true //是否显示分页
				,limits: [5, 10, 15]
				,limit: 10 //每页默认显示的数
				//,skin: 'line' //表格风格
				,done:function(res, curr, count){//数据,页码,数据总量
					//alert(111);
					
				}
			});
  
			//监听行工具事件
			table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值
				if(layEvent === 'detail'){
					if(data.orderStatus){
						window.open("obligation.html?status="+data.orderStatus);
					}
					
				} else if(layEvent === 'del'){
					layer.confirm('真的删除行么', function(index){
						obj.del(); //删除对应行（tr）的DOM结构
						layer.close(index);
						//向服务端发送删除指令
					});
				} else if(layEvent === 'edit'){
					layer.msg('编辑操作');
				}
			});
		})
		
		
		//监听表格复选框选择
		/* table.on('checkbox(demo)', function(obj){
			console.log(obj)
		}); */
		
		
	</script>
</html>